<template>
   
  <div class="detail-container">
     
    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger"
          >当前订单状态：{{ order.orderStatus | formatStatus }}</span
        >
        <!-- <div class="operate-button-container" v-show="order.status === 0">
          <el-button size="mini">修改商品信息</el-button>
          <el-button size="mini" @click="showUpdateMoneyDialog"
            >修改费用信息</el-button
          >
          <el-button size="mini" @click="showMessageDialog"
            >发送站内信</el-button
          >
          <el-button size="mini" @click="showCloseOrderDialog"
            >关闭订单</el-button
          >
          <el-button size="mini" @click="showMarkOrderDialog"
            >备注订单</el-button
          > 
        </div>-->
        <div class="operate-button-container" v-show="order.status === 1">
          <el-button size="mini" @click="showMessageDialog"
            >发送站内信</el-button
          >
          <el-button size="mini">取消订单</el-button>
          <el-button size="mini" @click="showMarkOrderDialog"
            >备注订单</el-button
          >
        </div>
        <div
          class="operate-button-container"
          v-show="order.status === 2 || order.status === 3"
        >
          <el-button size="mini" @click="showLogisticsDialog"
            >订单跟踪</el-button
          >
          <el-button size="mini" @click="showMessageDialog"
            >发送站内信</el-button
          >
          <el-button size="mini" @click="showMarkOrderDialog"
            >备注订单</el-button
          >
        </div>
        <div class="operate-button-container" v-show="order.status === 4">
          <el-button size="mini" @click="handleDeleteOrder">删除订单</el-button>
          <el-button size="mini" @click="showMarkOrderDialog"
            >备注订单</el-button
          >
        </div>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-s米糕">基本信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">订单编号</el-col>
          <el-col :span="4" class="table-cell-title">用户账号</el-col>
          <el-col :span="4" class="table-cell-title">支付方式</el-col>
          <el-col :span="4" class="table-cell-title">联系方式</el-col>
          <el-col :span="4" class="table-cell-title">下单时间</el-col>
          <el-col :span="4" class="table-cell-title">支付时间</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{ order.orderSnId }}</el-col>
          <el-col :span="4" class="table-cell">{{ order.userName }}</el-col>
          <el-col :span="4" class="table-cell">{{
            order.payType | formatPayType
          }}</el-col>
          <el-col :span="4" class="table-cell">{{ order.mobile }}</el-col>
          <el-col :span="4" class="table-cell">{{
            order.createTime | FormatCreateTime
          }}</el-col>
          <el-col :span="4" class="table-cell">{{
            0 == order.payTime ? "未支付" : (order.payTime | FormatCreateTime)
          }}</el-col>
        </el-row>
      </div>

      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-s米糕">商品信息</span>
      </div>
      <el-table
        ref="orderItemTable"
        :data="order.orderItemList"
        style="width: 100%; margin-top: 20px"
        border
      >
        <el-table-column label="商品图片" align="center">
          <template slot-scope="scope">
            <img :src="ossURL + scope.row.picture" style="height: 80px" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.tradename }}</p>
            <!-- <p>分类：{{ scope.row.productBrand }}</p> -->
          </template>
        </el-table-column>
        <el-table-column label="价格/tokenId" align="center">
          <template slot-scope="scope">
            <p>价格：￥{{ scope.row.goodsPrice }}</p>
            <p>tokenId：{{ scope.row.tokenId }}</p>
          </template>
        </el-table-column>

        <el-table-column label="数量" align="center">
          <template slot-scope="scope">
            {{ scope.row.goodsNum }}
          </template>
        </el-table-column>
        <el-table-column label="提现状态" align="center">
          <template slot-scope="scope">
            {{ withdrawalStatus[scope.row.sellStatus] }}
          </template>
        </el-table-column>

        <el-table-column label="铸造状态" align="center">
          <template slot-scope="scope">
            {{ castStatus[scope.row.alreadyCasting] }}
          </template>
        </el-table-column>

        

        <el-table-column label="小计" align="center">
          <template slot-scope="scope">
            ￥{{ scope.row.goodsPrice * scope.row.goodsNum }}
          </template>
        </el-table-column>

        <el-table-column label="操作"  align="center">
          <template slot-scope="scope" v-if="scope.row.alreadyCasting === 0 && scope.row.status === 1">
            <el-button type="button" @click="castingTOServer(scope.row)">重新铸造</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right; margin: 20px">
        合计：<span class="color-danger">￥{{ order.priceSum }}</span>
      </div>
      <div style="margin-top: 60px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-s米糕">综合信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">商品合计</el-col>
          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
          <el-col :span="6" class="table-cell-title">订单类型</el-col>
          <el-col :span="6" class="table-cell-title">支付平台</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell"
            >￥{{ order.priceSum }}</el-col
          >
           <el-col :span="6" class="table-cell"
            >￥{{ order.priceSum }}</el-col
          >
           <el-col :span="6" class="table-cell"
            >{{ order.orderType|formatOrderType }}</el-col
          >
           <el-col :span="6" class="table-cell"
            >{{ order.platform|formatSourceType }}</el-col
          >
        </el-row>
      </div>
     
    </el-card>
  </div>
</template>
<script>
import {
  getOrderDetail,
  updateReceiverInfo,
  updateMoneyInfo,
  closeOrder,
  updateOrderNote,
  deleteOrder,
  recast
} from "../../../api/order";
import VDistpicker from "v-distpicker";
import OrderFilter from "../../../filter/orderDetail"
import { OSS_URL } from "../../../contanst/url";
import { Storage } from "../../../store/storage";
import { CAST_STATUS, WITHDRAWAL_STATUS } from "../../../contanst/data";
const defaultReceiverInfo = {
  orderId: 0,
  receiverName: "",
  receiverPhone: "",
  receiverPostCode: 0,
  receiverDetailAddress: "",
  orderStatus: 0,
};

export default {
  name: "orderDetail",
  components: { VDistpicker },
  data() {
    return {
      id: null,
      order: {},
      receiverDialogVisible: false,
      receiverInfo: Object.assign({}, defaultReceiverInfo),
      moneyDialogVisible: false,
      moneyInfo: {
        orderId: null,
        freightAmount: 0,
        discountAmount: 0,
        status: null,
      },
      withdrawalStatus: WITHDRAWAL_STATUS,
      castStatus: CAST_STATUS,
      messageDialogVisible: false,
      message: { title: null, content: null },
      closeDialogVisible: false,
      closeInfo: { note: null, id: null },
      markOrderDialogVisible: false,
      markInfo: { note: null },
      logisticsDialogVisible: false,
      ossURL: OSS_URL,
    };
  },
  created() {
    this.id = this.list = this.$route.query.id;

    let res = Storage.getOrderList();

    let result = res.filter((value) => value.id == this.$route.query.id);

    this.order = result[0];
    this.order.orderItemList = [];
    getOrderDetail(this.id, this);
  },
  filters: OrderFilter,
  methods: {

    castingTOServer(data) {
      recast(data, this);
    },

    onSelectRegion(data) {
      this.receiverInfo.receiverProvince = data.province.value;
      this.receiverInfo.receiverCity = data.city.value;
      this.receiverInfo.receiverRegion = data.area.value;
    },
    formatTime(time) {
      if (time == null || time === "") {
        return "";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    formatStepStatus(value) {
      return Number(value) + 1 ;
    },
    showUpdateReceiverDialog() {
      this.receiverDialogVisible = true;
      this.receiverInfo = {
        orderId: this.order.id,
        receiverName: this.order.receiverName,
        receiverPhone: this.order.receiverPhone,
        receiverPostCode: this.order.receiverPostCode,
        receiverDetailAddress: this.order.receiverDetailAddress,
        receiverProvince: this.order.receiverProvince,
        receiverCity: this.order.receiverCity,
        receiverRegion: this.order.receiverRegion,
        status: this.order.status,
      };
    },
    handleUpdateReceiverInfo() {
      this.$confirm("是否要修改收货信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        updateReceiverInfo(this.receiverInfo).then((response) => {
          this.receiverDialogVisible = false;
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          getOrderDetail(this.id).then((response) => {
            this.order = response.data;
          });
        });
      });
    },
    showUpdateMoneyDialog() {
      this.moneyDialogVisible = true;
      this.moneyInfo.orderId = this.order.id;
      this.moneyInfo.freightAmount = this.order.freightAmount;
      this.moneyInfo.discountAmount = this.order.discountAmount;
      this.moneyInfo.status = this.order.status;
    },
    handleUpdateMoneyInfo() {
      this.$confirm("是否要修改费用信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        updateMoneyInfo(this.moneyInfo).then((response) => {
          this.moneyDialogVisible = false;
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          getOrderDetail(this.id).then((response) => {
            this.order = response.data;
          });
        });
      });
    },
    showMessageDialog() {
      this.messageDialogVisible = true;
      this.message.title = null;
      this.message.content = null;
    },
    handleSendMessage() {
      this.$confirm("是否要发送站内信?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.messageDialogVisible = false;
        this.$message({
          type: "success",
          message: "发送成功!",
        });
      });
    },
    showCloseOrderDialog() {
      this.closeDialogVisible = true;
      this.closeInfo.note = null;
      this.closeInfo.id = this.id;
    },
    handleCloseOrder() {
      this.$confirm("是否要关闭?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = new URLSearchParams();
        params.append("ids", [this.closeInfo.id]);
        params.append("note", this.closeInfo.note);
        closeOrder(params).then((response) => {
          this.closeDialogVisible = false;
          this.$message({
            type: "success",
            message: "订单关闭成功!",
          });
          getOrderDetail(this.id).then((response) => {
            this.order = response.data;
          });
        });
      });
    },
    showMarkOrderDialog() {
      this.markOrderDialogVisible = true;
      this.markInfo.id = this.id;
      this.closeOrder.note = null;
    },
    handleMarkOrder() {
      this.$confirm("是否要备注订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = new URLSearchParams();
        params.append("id", this.markInfo.id);
        params.append("note", this.markInfo.note);
        params.append("status", this.order.status);
        updateOrderNote(params).then((response) => {
          this.markOrderDialogVisible = false;
          this.$message({
            type: "success",
            message: "订单备注成功!",
          });
          getOrderDetail(this.id).then((response) => {
            this.order = response.data;
          });
        });
      });
    },
    handleDeleteOrder() {
      this.$confirm("是否要进行该删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = new URLSearchParams();
        params.append("ids", [this.id]);
        deleteOrder(params).then((response) => {
          this.$message({
            message: "删除成功！",
            type: "success",
            duration: 1000,
          });
          this.$router.back();
        });
      });
    },
    showLogisticsDialog() {
      this.logisticsDialogVisible = true;
    },
  },
};
</script>
<style scoped>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #f2f6fc;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>


